<template>
  <div class="zhiNengChuWuGuiShiYong">
    <div class="top-tools">
      <h3>智能储物柜使用情况</h3>
    </div>
    <div id="zhiNengChuWuGuiShiYong"></div>
  </div>
</template>

<script>
import $api from "@/axios/apiConfig"; //接口
import axios from "@/axios"; //请求
import { Chart } from "@antv/g2";
export default {
  data() {
    return {
      data: [],
      chart:null,
    };
  },
  methods: {
    createChart() {
      const chart = new Chart({
        container: "zhiNengChuWuGuiShiYong",
        autoFit: true,
        height: 258
      });
      chart.data(this.data);
      chart.tooltip({
        showMarkers: false,
        shared: true
      });
      chart.axis('date',{
        type:'timeCat'
      })
      chart
        .interval()
        .position("date*value")
        .color("name")
        .size(11)
        .adjust([
          {
            type: 'dodge',
            marginRatio: 0,
          },
        ]);
      chart.interaction("active-region");
      chart.render();
      this.chart = chart;
    },
    getData(){
      axios.get($api.api+'/smart-uttc/cabinet-use-log/white/getUseInfoList').then(res => {
            if (res) {
                res.data.map(item=>{
                  item.date = item.date.split('-')[1]+item.date.split('-')[2]
                })
                this.data = res.data;
                this.createChart();
            }
      });
    }
  },
  mounted() {
    this.getData();
  }
};
</script>

<style lang="scss" scoped>
.zhiNengChuWuGuiShiYong {
  padding: 12px 20px;
  .top-tools {
    display: flex;
    justify-content: space-between;
    align-items: center;
    h3 {
      font-size: 16px;
      height: 16px;
      line-height: 16px;
      padding-left: 10px;
      border-left: 4px solid #00ffee;
      margin-bottom: 20px;
    }
  }
}
</style>